<template>
	<view class="content">
		<search></search>
		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots indicator-color indicator-active-color autoplay :interval="2000" circular>
			<swiper-item v-for="item,index in swiper" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!--导航  -->
		<view class="title">
			<image :src="item.image_src" mode="widthFix" v-for="item,index in title" :key="index"></image>
		</view>
		<!-- 楼层 -->
		<view class="list" v-for="item,index in list" :key="index">
			<image class="img" :src="item.floor_title.image_src" mode="widthFix"></image>
			<view class="lis">
			 <image  :class="i==0?'a1':'a2'" :src="n.image_src" v-for="n,i in item.product_list"
			 	:key="i"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../componentas/search/search.vue'
	import api from '../../utils/api.js'
	export default {
		components: {
			search
		},
		data() {
			return {
				swiper: [], //轮播图
				title: [], //导航
				list: [], //楼层
			}
		},
		onLoad() {
			//轮播图
			api.get('home/swiperdata').then(res => {
				// console.log(res);
				this.swiper = res.message
			})
			//导航
			api.get('home/catitems').then(res => {
				// console.log(res);
				this.title = res.message
			})
			//楼层
			api.get('home/floordata').then(res => {
				// console.log(res);
				this.list = res.message
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.list {
		margin-top: 10rpx;

		.img {
			margin: 20rpx;
		}
           
	   .lis{
		   margin-left: 20rpx;
		   image{
			   float: left;
			   width: calc(33.3% - 20rpx);
			   margin-right: 20rpx;
		   }
		   .a1{
			   height: 480rpx;
		   }
		   .a2{
			   height: 230rpx;
			   margin-bottom: 20rpx;
		   }
	   }
	}

	.title {
		height: 200rpx;
		display: flex;
		align-items: center;
		padding: 10rpx;

		// background-color: red;
		image {
			flex: 1;
			text-align: center;
		}
	}
</style>
